<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <style type="text/css">
        .record {
            width: 10rem;
            height: 10rem;
            background-color: red;
            color: white;
            font-size: 1.8rem;
            border-radius: 50%;
            line-height: 10rem;
            text-align: center;
        }

        .info {
            position: fixed;
            top: 0;
            right: 0;
            width: 5rem;
        }

        .info img {
            width: 5rem;
            height: 5rem;
            display: block;
            border-radius: 50%;
        }

        .info>div {
            text-align: center;
            padding-top: 1rem;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="record" @click="record">
            开始录音
        </div>
        <div class="info">
            <img :src="avatar" alt="">
            <div>{{nickName}}</div>
        </div>
        <button @click="downLoadVoice" v-if="voiceId!=''">下载</button>
    </div>
    <script>

        // wx.config(
        //     {
        //         "debug": true,
        //         "jsApiList": ["startRecord", "stopRecord", "scanQRCode"],
        //         "signature": "b4b21fef40c658fd932e538d7351b9725bab4840",
        //         "appId": "wxa89ffeadbc555bb1",
        //         "nonceStr": "wx-js-sdk",
        //         "timestamp": 1697950332
        //     }
        // );
        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        });
        wx.error(err => {
        })
        new Vue({
            el: '#app',
            data() {
                return {
                    href: '',
                    code: '',
                    openId: '',
                    nickName: '',
                    avatar: '',
                    error: '',
                    isRecord: false,
                    voiceId: ''
                }
            },
            methods: {
                // 录音/停止
                record() {
                    let that = this
                    if (this.isRecord == false) {
                        // 录音
                        wx.startRecord();
                        this.isRecord = true;
                        document.querySelector(".record").textContent = '录音中'
                    } else {
                        // 结束录音
                        wx.stopRecord({
                            success: function (res) {
                                var localId = res.localId;
                                // alert("localId: " + localId)
                                //     上传到服务器
                                wx.uploadVoice({
                                    localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                                    isShowProgressTips: 1, // 默认为1，显示进度提示
                                    success: function (res) {
                                        var serverId = res.serverId; // 返回音频的服务器端ID
                                        that.voiceId = serverId
                                    }
                                });
                            }
                        });
                        this.isRecord = false;
                        document.querySelector(".record").textContent = '开始录音'
                    }
                },
                // 下载语音文件
                downLoadVoice() {
                    let that = this
                    alert("开始下载" + this.voiceId)
                    wx.downloadVoice({
                        serverId: that.voiceId, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            var localId = res.localId; // 返回音频的本地ID
                            // wx.translateVoice({
                            //     localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
                            //     isShowProgressTips: 1, // 默认为1，显示进度提示
                            //     success: function (res) {
                            //         alert(res.translateResult); // 语音识别的结果
                            //     }
                            // })
                            wx.playVoice({
                                localId: localId // 需要暂停的音频的本地ID，由stopRecord接口获得
                            });
                        },
                        fail: err => {
                            alert(JSON.stringify(err))
                        }
                    })
                },
                // 微信用户信息数据
                getUserWXInfo() {
                    let that = this
                    this.href = location.href;
                    // 1.获取code
                    this.code = this.href.substring(this.href.indexOf("code=") + 5, this.href.indexOf("&state"))
                    // 2.将code发送给后端，通过code换取网页授权access_token
                    axios({
                        method: 'get',
                        url: 'https://500484ng77.imdo.co/WXTest/getUserInfo',
                        params: {
                            code: this.code
                        }
                    }).then(res => {
                        that.openId = res.data
                        that.nickName = res.data.nickname;
                        that.avatar = res.data.headimgurl;
                    }).catch(err => {
                        alert(err)
                    })
                },
                // js-sdk权限验证，获取wx.config
                getWxCongigure() {
                    let that = this
                    axios({
                        method: 'get',
                        url: 'https://500484ng77.imdo.co/WXTest/getWxConfig',
                        params: {
                            url: this.href
                        }
                    }).then(res => {
                        // 注入微信配置
                        wx.config(res.data)
                    }).catch(err => {
                        that.error = err
                    })
                }
            },
            mounted() {
                this.getUserWXInfo();
                this.getWxCongigure();
            }
        })

    </script>
</body>
</html>